import React, { MouseEventHandler } from 'react';
import { Button, Image } from 'react-bootstrap';
import {Container,Form} from 'react-bootstrap';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import 'bootstrap/dist/css/bootstrap.css';
import { CartFill } from 'react-bootstrap-icons';
// import NavDropdown from 'react-bootstrap/NavDropdown';

interface MallNavBarProps{
  title?:string;
  onPressCart?:MouseEventHandler|undefined
}

const MallNavBar:React.FC<MallNavBarProps> = (props:MallNavBarProps) => {
  return (
    <Navbar collapseOnSelect expand="lg">
      <Container fluid className='m-0 p-0 d-flex flex-column align-items-start'>
          <Navbar.Brand href="#home">&nbsp;&nbsp;<Image height={28} src={require("../../resources/images/magic-cube.jpeg")}/>&nbsp;&nbsp;<i>{props.title}</i></Navbar.Brand>
          <Nav className='m-0 p-0' style={{width:"100%"}}>
            <Container fluid className='d-flex flex-row m-0 py-2' 
              style={{justifyContent:"space-between"}}>
                <Form className="d-flex">
                    <Form.Control
                      type="search"
                      placeholder="Search"
                      className="me-2 pe-2"
                      aria-label="Search"
                    />
                    <Button variant="outline-success">Search</Button>
                </Form>
                <Nav.Link eventKey={2} onClick={props.onPressCart}>
                  <CartFill />
                </Nav.Link>
                </Container>
            </Nav>
        </Container>
    </Navbar>
  );
}

MallNavBar.defaultProps = {
  title:"My Online Store",
  onPressCart:()=>{}
}

export default MallNavBar;